<div class="select-wrap mdl-grid" [class.static]="static">
  <div class="tbl-wrap mdl-cell mdl-cell--3-col">
    <table class="mdl-data-table mdl-js-data-table project" [class.single]="selectIndex.project===-1">
      <thead>
        <tr>
          <!-- <th class="mdl-data-table__cell--non-numeric">ID</th> -->
          <th>项目</th>
          <th>LocationCode</th>
          <!-- <th *ngIf="!static">管理</th> -->
        </tr>
      </thead>
      <tbody>
        <tr [class.active]="i === selectIndex.project" *ngFor="let p of projects; let i = index" hoverAction mdl-button (click)="projectClick(p, i)">
          <!-- <td class="mdl-data-table__cell--non-numeric">{{p.id}}</td> -->
          <td>{{p.name}}</td>
          <td>{{p.locationCode}}</td>
          <!-- <td *ngIf="!static">
            <div class="icon-wrap">
              <mdl-icon class="icon material-icons">编辑</mdl-icon>
              <mdl-icon class="icon material-icons delete-icon">删除</mdl-icon>
            </div>
          </td> -->
        </tr>
      </tbody>
    </table>
  </div>
  <div class="tbl-wrap mdl-cell mdl-cell--3-col">
    <table class="mdl-data-table mdl-js-data-table building">
      <thead>
        <tr>
          <!-- <th class="mdl-data-table__cell--non-numeric">ID</th> -->
          <th>楼栋号</th>
          <th *ngIf="!static">管理</th>
        </tr>
      </thead>
      <tbody *ngIf="selectIndex.project !== -1">
        <tr [class.active]="i === selectIndex.building" *ngFor="let p of selectItem.project.buildings; let i = index;" hoverAction
          mdl-button (click)="buildingClick(p, i)">
          <!-- <td class="mdl-data-table__cell--non-numeric">{{p.id}}</td> -->
          <td *ngIf="editIndex.building !== i">{{p.buildingNumber}}</td>
          <td *ngIf="editIndex.building === i">
            <input class="edit-input" type="text" value="{{p.buildingNumber}}" [(ngModel)]="p.buildingNumber" />
          </td>
          <td *ngIf="!static">
            <div class="icon-wrap">
              <button mdl-button (click)="confirmBuilding($event, i);false;" *ngIf="editIndex.building === i" class="">完成</button>
              <button mdl-button (click)="makeBuildingEdit(i, $event);false;" class="">编辑</button>
              <button mdl-button (click)="deleteBuilding($event,i)" class=" delete-icon">删除</button>
            </div>
          </td>
        </tr>
        <ng-template [ngIf]="!static">
          <tr>
            <td>
              <button class="" mdl-button (click)="addNew('building')" [disabled]="isPosting">添加</button>
            </td>
            <td>
              <input #newBuilding type="text" [(ngModel)]="editBuilding.buildingAlias" />
            </td>
            <!-- <td></td> -->
          </tr>
        </ng-template>
      </tbody>
    </table>
  </div>
  <div class="tbl-wrap mdl-cell mdl-cell--3-col">
    <table class="mdl-data-table mdl-js-data-table building">
      <thead>
        <tr>
          <!-- <th class="mdl-data-table__cell--non-numeric">ID</th> -->
          <th>楼层</th>
          <th *ngIf="!static">管理</th>
        </tr>
      </thead>
      <tbody *ngIf="selectIndex.building !== -1">
        <tr [class.active]="i === selectIndex.floor" *ngFor="let p of selectItem.building.floors; let i = index;" mdl-button (click)="floorClick(p, i)"
          hoverAction>
          <!-- <td class="mdl-data-table__cell--non-numeric">{{p.id}}</td> -->
          <!-- <td>{{p.index}}</td> -->
          <td *ngIf="editIndex.floor !== i">{{p.index}}</td>
          <td *ngIf="editIndex.floor === i">
            <input class="edit-input" type="text" value="{{p.index}}" [(ngModel)]="p.index" />
          </td>
          <td *ngIf="!static">
            <div class="icon-wrap">
              <button mdl-button (click)="confirmFloor($event, i);false;" *ngIf="editIndex.floor === i" class="">完成</button>
              <button mdl-button (click)="makeFloorEdit(i, $event);false;" class="">编辑</button>
              <button mdl-button (click)="deleteFloor($event,i)" class=" delete-icon">删除</button>
            </div>
          </td>
        </tr>
        <tr *ngIf="!static">
          <td>
            <button mdl-button (click)="addNew('Floor')" class="" [disabled]="isPosting">添加</button>
          </td>
          <td>
            <input #newFloor type="text" [(ngModel)]="editFloor.id ? '' : editFloor.index" />
          </td>
          <!-- <td></td> -->
        </tr>
      </tbody>
    </table>
  </div>
  <div class="tbl-wrap mdl-cell mdl-cell--3-col">
    <table class="mdl-data-table mdl-js-data-table mdl-cell mdl-cell--3-col building">
      <thead>
        <tr>
          <!-- <th class="mdl-data-table__cell--non-numeric">ID</th> -->
          <th>单元号</th>
          <th *ngIf="!static">管理</th>
        </tr>
      </thead>
      <tbody *ngIf="selectIndex.floor !== -1">
        <tr [class.active]="i === selectIndex.unit" *ngFor="let p of selectItem.floor.units; let i = index" mdl-button (click)="unitClick(p, i)"
          hoverAction>
          <!-- <td class="mdl-data-table__cell--non-numeric">{{p.id}}</td> -->
          <td *ngIf="editIndex.unit !== i">
            {{p.name}}
          </td>
          <td *ngIf="editIndex.unit === i">
            <input class="edit-input" type="text" value="{{p.name}}" [(ngModel)]="p.name" />
          </td>
          <td>
            <div class="icon-wrap" *ngIf="!static">
              <button mdl-button (click)="confirmUnit($event, i);false;" *ngIf="editIndex.unit === i" class="">完成</button>
              <button mdl-button (click)="makeUnitEdit(i, $event);false;" class="">编辑</button>
              <button mdl-button (click)="deleteUnit($event,i)" class="delete-icon">删除</button>
            </div>
          </td>
        </tr>
        <tr *ngIf="!static">
          <td>
            <button mdl-button (click)="addNew('Unit')" class="" [disabled]="isPosting">添加</button>
          </td>
          <td>
            <input #newUnit type="text" [(ngModel)]="editUnit.id ? '' : editUnit.name" />
          </td>
          <!-- <td></td> -->
        </tr>
      </tbody>
    </table>
  </div>

  <!-- <button mdl-button mdl-button-type="fab">
    <mdl-icon>add</mdl-icon>
  </button> -->
</div>